// 条件渲染
// 条件:==>条件语句或者变量的布尔值
// 渲染:==>渲染dom
// 具体可以配合 三元 ,函数,逻辑运算符 来实现条件渲染

// 1:=====>通过if else 实现
// 条件
const isLoading=true
const isGet=false

// 渲染ui
const loadingUI=<h4>数据渲染</h4>
const getDataUI=<h4>数据请求成功</h4>
// 函数
const loadData=()=>{
  // 条件语句
  if(isLoading){
    return loadingUI
  }else if(isGet){
    return 
  }else{
    return getDataUI
  }
}

const jsx=<div>{loadData()}</div>

// ReactDOM.render(jsx,document.getElementById('root'))

// 方式二:逻辑运算符实现条件渲染
// 条件
const s1=true

const s2=false

// 渲染
const uiOne=<div>{s1}</div>
const uiTwo=<div>{s2}</div>

const Logic=<div>{uiOne && uiTwo}</div>

ReactDOM.render(Logic,document.getElementById('root'))